<template>
  <div class="monitorBox">
    <div class="monitor">
      <checked-title title="监控列表">
        <template #right>
          <p class="zongshu">在线：{{ total }}台</p>
        </template>
      </checked-title>
      <!-- 视频 -->
      <ul class="videoUl flex flex-wrap">
        <li class="videoItem" v-for="item in videoList" :key="item.siteNumber" @click="videoListClick(item)">
          <img :src="item.img" alt="">
          <p class="pointer">{{ item.name }}</p>
        </li>
      </ul>
      <!-- 分页 -->
      <div class="videopage">
        <el-pagination @size-change="pageChange" layout="prev, pager, next, jumper" :page-size="pageSize" :total="total"
          :page-count="3" @current-change="pageChange">
        </el-pagination>
      </div>

      <MonitoringPopup ref="videoPopup"></MonitoringPopup>
    </div>
  </div>
</template>
<script>
import MonitoringPopup from '../monitoringPopup.vue'
import { getViDeviceList } from '@/api/index.js' //api

export default {
  components: {
    MonitoringPopup,
  },
  props: {
    pageType: {
      type: Number,
      default: 1,
    }, //页面类型
  },
  data() {
    return {
      imgbg: require('../../assets/images/videoimg.png'),
      pageNo: 1, //当前也
      pageSize: 6, //每页条数
      total: 0, //视频总数
      videoList: [], //监控列表
      isLastPage: false, //是否最后一页
      videoData: {},
    }
  },
  mounted() {
    this.getList()
  },

  methods: {
    //分页
    pageChange(e) {
      this.pageNo = e
      this.getList()
    },
    //监控列表
    getList() {
      var data = {
        type: this.pageType,
        state: 1,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      }
      getViDeviceList(data)
        .then((res) => {
          this.total = res.data.totalRows
          this.videoList = res.data.rows || []
        })
        .catch((err) => {
        })
    },

    //点击监控对应地图
    videoListClick(item) {
      this.$refs.videoPopup.open(item)
    },

  },
}
</script>
<style lang="less" scope>
.monitorBox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.monitor {
  width: 100%;
  height: 100%;
  flex: 1;
  height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  // height: 0;
  .zongshu {
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #3cffff;
    margin-top: -85px;
    margin-left: 350px;
  }

  .videoUl {
    // flex: 1;
    overflow: hidden;
    justify-content: space-around;

    .videoItem {
      cursor: pointer;
      width: 210px;
      margin-top: 20px;
      margin-right: 3%;

      border: 1px dashed rgba(33, 158, 255, 0.6);
      box-shadow: 0px 0px 29px 2px #1442ac;
      padding-bottom: 20px;

      img {
        width: 100%;
        height: 180px;
      }

      p {
        font-size: 16px;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #feffff;
        margin-top: 8px;
        text-align: center;
        margin-top: 17px;
      }

      .jynVideo {
        position: relative;

        .cover-picture {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          z-index: 1002;

          img {
            display: block;
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    .videoItem:nth-child(2n + 2) {
      margin-right: 0;
    }
  }


  .videopage {
    margin: 10px auto 0;
  }

  .el-pager li {
    background: none;
    color: #ffffff;
  }

  .el-pager li.active {
    color: #409eff !important;
  }

  .el-pagination .btn-next,
  .el-pagination .btn-prev {
    background: none;
  }

  .el-pagination .btn-next .el-icon,
  .el-pagination .btn-prev .el-icon {
    color: #ffffff;
  }
}
</style>
